<template>
    <div>
      <div class="registerContent">
        <div class="l_header_bg"></div>
        <div class="l-cont">
          <div class="accountCenter">
            <div class="box container" style="padding-top: 24px;padding-left: 24px;">
              <div class="top">
                <div class="gly_xx">
                  <p>管理员信息</p>
                  <div class="xiugai_1"  @click="modal7 = true">
                    修改
                  </div>
                  <span></span>
                </div>
                <div class="gly_xq">
                  <ul>
                    <li>
                      <div class="gly_xq_div1">登录手机号：</div>
                      <div class="gly_xq_div2 gly_phone">12345678910</div>
                    </li>
                    <li style="border-top: 1px solid #D9E2FF;">
                      <div class="gly_xq_div1">用户姓名/昵称：</div>
                      <div class="gly_xq_div2 gly_name">XXXXXXXXXXX</div>
                    </li>
                    <li style="border-top: 1px solid #D9E2FF;">
                      <div class="gly_xq_div1">邮箱：</div>
                      <div class="gly_xq_div2 gly_email">XXXXXXX@2XXX.com</div>
                    </li>
                  </ul>
                </div>
              </div>
              
              <div class="con">
                <div class="gly_xx">
                  <p>用户管理</p>
                  <div id="create" @click="modal9 = true">
                    新建
                  </div>
                  <span></span>
                </div>
                <div class="con_top">
									<form class="form-inline">
										<div class="row" style="padding: 0 28px; margin-bottom: 30px;">
											<div class="form-group" style="">
												<label for="">用户姓名/昵称:</label>
												<input type="text" class="form-control u_name"   placeholder="">
											</div>
											<div class="form-group">
												<label for="">登录手机号:</label>
												<input type="text" class="form-control u_phone"   placeholder="">
											</div>
											<div class="form-group">
												<label for="">邮箱:</label>
												<input type="text" class="form-control u_email"   placeholder="">
											</div>
											<!--本期隐藏-->
											<div class="form-group" style="display:none">
												<label for="">用户角色:</label>
												<input type="text" class="form-control u_role"   placeholder="">
											</div>

										</div>
										<div class="row" style="padding: 0 30px;margin-bottom: 28px;">

											<div style="float:left;margin-top:8px;font-size:15px;">
												<label for="">
                          <span>
                            用户状态：
                          </span>
                          <Select v-model="Data.UserState" clearable style="width:150px">
                            <Option v-for="item in PayList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                          </Select>
                        </label>
											</div>

											<div class="form-group" style="float: right;">
												<div class="con_sub">
													<div class="ser_ss">搜索</div>
													<div class="re_clear">清除</div>
												</div>
											</div>
										</div>
									</form>

								</div>
								<div class="con_list">
									<table class="table table-striped" style='table-layout:fixed;'>
										<thead>
											<th width="7%">用户ID</th>
											<th width="10%">姓名/昵称</th>
											<th width="10%">登录手机号</th>
											<th>邮箱</th>
											<th>用户角色</th>
											<th width="8%">用户状态</th>
											<th>创建时间</th>
											<th>操作</th>
										</thead>
										<tbody class="tbody">
                      <tr id="tr_162" orderid="162">
                        <th>162</th>
                        <td>xx</td>
                        <td>15617801519</td>
                        <td>18458160876@qq.com</td>
                        <td style="width:10%" class="moreHide"></td>
                        <td>启用</td><td>2018/11/14 17:48:58</td>
                        <td>
                          <span style="color:#6081FF;" @click="xiugai = true">修改</span>
                          <span>|</span>
                          <span data-toggle="modal" class="mm_162" @click="ReSetpass = true"  style="color:#6081FF;">重置密码</span>
                          <span>|</span>
                          <span  style="color: red" @click="DELTTE(1)">删除</span>
                        </td>
                      </tr>
										</tbody>
									</table>
									<div class="tabDiv">暂无数据</div>
									<!--分页-->
									<p id="totalCounts"></p>
									<div class="contjoin_one_page mypage page">
                    <Page :total="20" show-elevator @on-change="ChangePage" @keyup.enter="ChangePage"/>
                  </div>
								</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- //alert1 -->
      <Modal
          title="管理员修改"
          v-model="modal7"
          :closable="false" 
          @on-ok="IsOk">
          <p>如果新管理员是已有用户，请输入新管理员的登陆手机号；
            如果新管理员还不是本账号用户，请先创建用户。</p>
          <p style="margin-top:20px;">
            <span>登录手机号:</span>
            <input v-model="moblie" type="text" style="width:60%">
            <span v-if="show" style="color:red">请输入正确的手机号！</span>
          </p>
          <span v-if="show" class="Cok">确定</span>
      </Modal>
      <!-- 新建 -->
      <Modal
        title="新建用户"
        v-model="modal9"
        :styles="{top: '60px'}">
        <div class="Xuser">
          <p>
            <span>
              <i>*</i>姓名/昵称：
            </span>
            <span>
              <input v-model="Data.UserName" type="text" required>
            </span>
          </p>
          <p>
            <span>
              <i>*</i>登录手机号：
            </span>
            <span>
              <input v-model="Data.UserMobile" type="text">
            </span>
          </p>
          <p>
            <span>
              <i>*</i>邮箱：
            </span>
            <span>
              <input v-model="Data.UserEmail" type="email">
            </span>
          </p>
          <p>
            <span>
              用户角色：
            </span>
            <span></span>
          </p>
          <p>
            <span>
              用户状态：
            </span>
            <span style="text-align:left">
              <!-- <label for="" style="font-size:16px"> -->
                <input @change="StopOrBegin('启用')" checked style="width:20px" type="radio" name="1">
                启用
                <input @change="StopOrBegin('停用')" style="width:20px" type="radio" name="1">
                停用
              <!-- </label> -->
            </span>
          </p>
          <p>
            <span>
              <i>*</i>初始密码：
            </span>
            <span>
              <input v-model="Data.UserPass" type="text">
            </span>
          </p>
        </div>
        <div class="FOOTER">
          <button class="XinJian" @click="XinJian">确定</button>
          <button class="XonJianModel" @click="XonJianModel">取消</button>
          
        </div>
        <p v-if="ERROR1" class="Error">{{ERROR1infor}}</p>
      </Modal>
      <!-- 修改 -->
      <Modal v-model="xiugai" title="修改">
        <div class="Xuser">
          <p>
            <span>
              <i>*</i>姓名/昵称：
            </span>
            <span>
              <input v-model="Data.UserName" type="text">
            </span>
          </p>
          <p>
            <span>
              <i>*</i>登录手机号：
            </span>
            <span>
              <input v-model="Data.UserMobile" type="text">
            </span>
          </p>
          <p>
            <span>
              <i>*</i>邮箱：
            </span>
            <span>
              <input v-model="Data.UserEmail" type="text">
            </span>
          </p>
          <p>
            <span>
              用户角色：
            </span>
            <span></span>
          </p>
          <p>
            <span>
              用户状态：
            </span>
            <span style="text-align:left">
                <input @change="StopOrBegins('启用')" checked style="width:20px" type="radio" name="2">
                启用
                <input @change="StopOrBegins('停用')" style="width:20px" type="radio" name="2">
                停用
            </span>
          </p>
        </div>
        <p v-if="ERROR1" class="Error">{{ERROR1infor}}</p>
        <div class="FOOTER">
          <button class="XinJian" @click="xiugaiU">确定</button>
          <button class="XonJianModel" @click="XiugaiMo">取消</button>
          
        </div>
      </Modal>
      <!-- 重置密码 -->
      <Modal v-model="ReSetpass" title="重置密码">
        <div>
          <p style="font-size:16px;">请输入新密码</p>
          <p style="width:80%;margin:10px auto;font-size:14px;">
            <label for="">
              <span style="color:red">*</span>新密码
              <input type="text" style="width:80%">
            </label>
          </p>
        </div>
         <p v-if="ERROR1" class="Error">{{ERROR1infor}}</p>
        <div class="FOOTER">
          <button class="XinJian" @click="Setpass">确定</button>
          <button class="XonJianModel" @click="SetpassMo">取消</button>
        </div>
      </Modal>
      <Modal title="提示" v-model="Uchange" @on-ok="Delette">
        <div>
          确定删除此条数据吗？
        </div>
      </Modal>

    </div>
</template>
<script>
export default {
  data() {
    return {
      Uchange: false,
      UchangePass: true,
      ERROR1: false,
      ERROR1infor: "",
      modal7: false,
      modal9: false,
      moblie: "",
      show: false,
      Choose: "",
      Data: {
        UserName: "",
        UserMobile: "",
        UserEmail: "",
        UserState: "",
        UserPass: ""
      },
      PayList: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "启用",
          label: "启用"
        },
        {
          value: "停用",
          label: "停用"
        }
      ],
      xiugai: false,
      ReSetpass: false
    };
  },
  mounted() {
    // console.log("tag", "this is 用户管理");
  },
  watch: {
    moblie: "textMp"
  },
  methods: {
    ChangePage(index) {
      // console.log("val", index);
    },
    //
    IsOk() {
      // console.log("this is model");
    },
    //
    textMp() {
      let dis = document.getElementsByClassName("ivu-btn-primary");
      let R = /^1[34578]\d{9}$/;
      // console.log(dis);
      if (!R.test(this.moblie)) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    //
    StopOrBegin(item) {
      // console.log("item", item); //启用or 启用
    },
    StopOrBegins(item) {
      // console.log("item", item); //启用or 启用
    },
    //新建
    XonJianModel() {
      this.moblie = "";
      this.show = false;
      this.modal9 = false;
      this.ERROR1 = false;
      this.ERROR1infor = "";
      // console.log("INFOR：", "this is clear");
    },
    XinJian() {
      let R = /^1[34578]\d{9}$/;
      let Six = /^(\w|\D){6,16}$/; // 密码6位数字以上
      let Eng = /^[\D]/; //密码英文开头
      let E = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; //邮箱
      if (this.Data.UserName == "") {
        this.ERROR1 = true;
        this.ERROR1infor = "姓名不能为空！";
        return;
      }
      if (!R.test(this.Data.UserMobile)) {
        this.ERROR1 = true;
        this.ERROR1infor = "请输入正确的手机号！";
        return;
      } else {
        this.ERROR1 = false;
        this.ERROR1infor = "";
      }
      if (!E.test(this.Data.UserEmail)) {
        this.ERROR1 = true;
        this.ERROR1infor = "请输入正确的email！";
        return;
      }

      if (this.Data.UserPass == "") {
        this.ERROR1 = true;
        this.ERROR1infor = "初始密码不可为空";
        return;
      } else if (
        !Eng.test(this.Data.UserPass) ||
        !Six.test(this.Data.UserPass)
      ) {
        this.ERROR1 = true;
        this.ERROR1infor = "密码格式不正确";
        return;
      } else {
        this.ERROR1 = false;
        this.ERROR1infor = "";
      }
      alert("123");
    },
    //修改
    xiugaiU() {},
    XiugaiMo() {
      this.xiugai = false;
      this.ERROR1 = false;
      this.ERROR1infor = "";
    },
    //重置密码
    Setpass(){

    },
    SetpassMo(){
      this.ReSetpass = false;
      this.ERROR1 = false;
      this.ERROR1infor = "";
    },
    //删除
    DELTTE(num){
      this.Uchange = true;
    },
    Delette(){
      alert('123')
    }

  }
};
</script>
<style scoped>
@import "../css/usergl";
.XonJianModel {
  background-color: white;
  border: 0.2px solid rgb(206, 203, 203);
  transition: all 0.2s;
}
.XonJianModel:hover {
  background-color: #6081ff;
  border: none;
  color: white;
}
.XinJian {
  background-color: #6081ff;
  color: white;
}
.FOOTER {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 60px;
  overflow: hidden;
}
.FOOTER button {
  float: right;
  width: 62px;
  margin-right: 17px;
  height: 38px;
  margin-top: 10px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
/* ================ */
.Error {
  text-align: center;
  font-size: 14px;
  color: red;
  margin-top: 10px;
}
.Cok {
  position: absolute;
  bottom: 12px;
  background-color: gray;
  width: 60px;
  height: 36px;
  right: 18px;
  border-radius: 5px;
  text-align: center;
  line-height: 36px;
  color: white;
  cursor: not-allowed;
}
.Xuser {
}
.Xuser p {
  overflow: hidden;
  font-size: 16px;
  margin-top: 2%;
}
.Xuser p span:first-child {
  float: left;
  width: 25%;
  text-align: right;
  margin-right: 2%;
}
.Xuser p span i {
  color: red;
}
.Xuser p span:last-child {
  float: left;
  width: 70%;
  text-align: right;
}
.Xuser p span:last-child input {
  width: 100%;
}
</style>


